<script setup>
import { ref } from 'vue'
import { getSingerDetail, getSingerSong } from '@/api/singer' // 引入获取歌手歌曲的API
import { baseURL } from '@/api/request'
import { getSongList, getSongDetail } from '@/api/song'
import { formatDate } from '@/utils/format'
import { useSongStore } from '@/stores/song'
const drawer = ref(false)
const singer = ref({
  name: '',
  sex: null,
  pic: '',
  birth: null,
  location: '',
  introduction: ''
})
const songs = ref([]) // 存储歌手歌曲列表
const loading = ref(false) // 加载状态

// 格式化性别显示
const formatSex = (sex) => {
  const sexMap = {
    0: '女',
    1: '男',
    2: '组合',
    3: '不明'
  }
  return sexMap[sex] || '未知'
}
const getFullImageUrl = (picPath) => {
  return baseURL + '/r' + picPath;
};


const openDrawer = async (row) => {
  drawer.value = true
  loading.value = true
  try {
    // 并行获取歌手详情和歌曲列表
    const [detailRes, songsRes] = await Promise.all([
      getSingerDetail(row.id),
      getSingerSong(row.id)
    ])
    
    singer.value = detailRes.data
    songs.value = songsRes.data || []
    console.log(songs.value)
  } catch (error) {
    console.error('获取歌手信息失败:', error)
  } finally {
    loading.value = false
  }
}

// 全局播放音乐
const songStore = useSongStore()
const playSong = (songId) => {
  songStore.addSongToPlaylist(songId);
}

defineExpose({
  openDrawer
})
</script>

<template>
  <el-drawer v-model="drawer" direction="rtl" size="40%">
    <template #header>
      <h4>歌手详情信息</h4>
    </template>
    <template #default>
      <div class="singer-detail">
        <div class="pic-container" v-if="singer.pic">
          <el-image
            class="singer-pic"
            :src="baseURL+'/r'+singer.pic"
            :preview-src-list="[baseURL+'/r'+singer.pic]"
            hide-on-click-modal
            preview-teleported
          ></el-image>
        </div>
        <div class="detail-item"><span class="label">歌手名称：</span>{{ singer.name || '未知' }}</div>
        <div class="detail-item"><span class="label">性别：</span>{{ formatSex(singer.sex) }}</div>
        <div class="detail-item"><span class="label">出生日期：</span>{{ formatDate(singer.birth) }}</div>
        <div class="detail-item"><span class="label">地区：</span>{{ singer.location || '未知' }}</div>
        <div class="detail-item introduction"><span class="label">简介：</span>{{ singer.introduction || '暂无简介' }}</div>
        
        <!-- 歌曲列表部分 -->
        <div class="song-list">
          <h4 class="song-list-title">歌曲列表</h4>
          <el-skeleton :loading="loading" animated>
            <template #template>
              <div class="skeleton-item" v-for="i in 5" :key="i">
                <el-skeleton-item variant="text" style="width: 100%; height: 50px" />
              </div>
            </template>
            <template #default>
              <div v-if="songs.length > 0" class="song-list">
                  <div @click="playSong(song.id)" class="song-item" v-for="song in songs" :key="song.id"
                  >
                  <!-- 第一列：照片 -->
                    <div class="song-cover">
                      <el-image
                        :src="baseURL + '/r' + song.pic"
                        :preview-src-list="[baseURL + '/r' + song.pic]"
                        alt="歌曲封面"
                        style="width: 60px; height: 60px; border-radius: 4px;"
                        class="song-cover"
                        fit="cover"
                      ></el-image>
                    </div>
      <!-- 第二列：歌曲名和歌手名-->
                  <div class="song-info">
                    <span class="song-name">{{ song.name }}</span>
                    <span class="song-artist">{{ singer.name }}</span>
                  </div>
      
      <!-- 第三列：创建时间 -->
                    <div class="song-time" > {{ formatDate(song.createTime) }}
                    </div>
                  </div> 
              </div>
              <el-empty v-else description="暂无歌曲" />
            </template>
          </el-skeleton>
        </div>
      </div>
    </template>
    <template #footer>
      <div style="flex: auto">
        <el-button @click="drawer = false">关闭</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<style scoped>
.song-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.song-item {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 12px;
  border-radius: 8px;
  background-color: #f8f8f8;
}

.song-cover img {
  width: 60px;
  height: 60px;
  border-radius: 4px;
  object-fit: cover;
}

.song-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.song-name {
  font-weight: bold;
  margin-bottom: 4px;
}

.song-artist {
  color: #666;
  font-size: 14px;
}

.song-time {
  color: #888;
  font-size: 14px;
  min-width: 120px;
  text-align: right;
}
.singer-detail {
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.detail-item {
  margin-bottom: 15px;
  line-height: 1.6;
  width: 100%;
  max-width: 500px;
}

.label {
  font-weight: bold;
  color: #606266;
  min-width: 80px;
  display: inline-block;
}

.pic-container {
  margin: 20px 0;
  display: flex;
  justify-content: center;
  width: 100%;
}

.singer-pic {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border: 3px solid #fff;
}

.introduction {
  white-space: pre-wrap;
  line-height: 1.8;
}

/* 歌曲列表样式 */
.song-list {
  width: 100%;
  margin-top: 30px;
  border-top: 1px solid #eee;
  padding-top: 20px;
}

.song-list-title {
  margin-bottom: 15px;
  color: #333;
}

.song-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.song-item:hover {
  background-color: #f5f7fa;
}

.song-info {
  display: flex;
  flex-direction: column;
}

.song-name {
  font-size: 14px;
  color: #333;
}

.song-artist {
  font-size: 12px;
  color: #999;
  margin-top: 4px;
}

.song-duration {
  font-size: 12px;
  color: #999;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .singer-pic {
    width: 150px;
    height: 150px;
  }
  
  .detail-item {
    max-width: 100%;
  }
}
</style>